<template>
  <div class="tag-settings">
    <!-- 头部栏 -->
    <HeaderComponent 
      :isLoggedIn="isLoggedIn"
      :userInfo="userInfo"
      :showUserPanel="showUserPanel"
      @open-login="$emit('open-login')"
      @toggle-user-panel="$emit('toggle-user-panel')"
      @logout="$emit('logout')"
    />
    
    <!-- 主布局 -->
    <div class="main-layout">
      <!-- 左侧设置导航栏 -->
      <aside class="settings-sidebar">
        <div class="sidebar-header">
          <h3>设置</h3>
        </div>
        <ul class="settings-nav">
          <li class="nav-item">
            <router-link to="/user/settings/profile" class="nav-link">
              <span class="nav-icon">👤</span>
              <span>个人资料</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/account" class="nav-link">
              <span class="nav-icon">🔐</span>
              <span>账号设置</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/general" class="nav-link">
              <span class="nav-icon">⚙️</span>
              <span>通用设置</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/notifications" class="nav-link">
              <span class="nav-icon">🔔</span>
              <span>消息设置</span>
            </router-link>
          </li>
          <li class="nav-item">
            <router-link to="/user/settings/block" class="nav-link">
              <span class="nav-icon">🚫</span>
              <span>屏蔽管理</span>
            </router-link>
          </li>
          <li class="nav-item active">
            <router-link to="/user/settings/tags" class="nav-link">
              <span class="nav-icon">🏷️</span>
              <span>标签管理</span>
            </router-link>
          </li>
        </ul>
      </aside>
      
      <!-- 右侧内容区 -->
      <main class="settings-content">
        <div class="settings-header">
          <h2>标签管理</h2>
          <p>管理您的个人标签和分类</p>
        </div>
      <div class="form-section">
        <h3>我的订阅标签</h3>
        <div class="search-section">
          <div class="search-input">
            <input 
              type="text" 
              v-model="searchTag" 
              placeholder="搜索标签" 
              @keyup.enter="searchTags"
            />
            <button class="btn-search" @click="searchTags">搜索</button>
          </div>
        </div>
        
        <div class="subscribed-tags">
          <div class="list-header">
            <span>已订阅标签 ({{ subscribedTags.length }})</span>
            <div class="header-actions">
              <select v-model="sortBy" @change="sortTags">
                <option value="name">按名称排序</option>
                <option value="date">按订阅时间排序</option>
                <option value="popularity">按热度排序</option>
              </select>
              <button class="btn-link" @click="refreshTags">刷新</button>
            </div>
          </div>
          
          <div v-if="subscribedTags.length === 0" class="empty-state">
            <p>暂无订阅标签</p>
            <button class="btn-primary" @click="showRecommendedTags">浏览推荐标签</button>
          </div>
          
          <div v-else class="tag-grid">
            <div 
              v-for="tag in sortedTags" 
              :key="tag.id" 
              class="tag-card"
            >
              <div class="tag-info">
                <div class="tag-header">
                  <h4 class="tag-name">#{{ tag.name }}</h4>
                  <span class="tag-category">{{ tag.category }}</span>
                </div>
                <p class="tag-description">{{ tag.description }}</p>
                <div class="tag-stats">
                  <span class="stat-item">
                    <i class="icon-posts"></i>
                    {{ tag.postCount }} 篇内容
                  </span>
                  <span class="stat-item">
                    <i class="icon-followers"></i>
                    {{ tag.followerCount }} 关注者
                  </span>
                </div>
                <div class="tag-meta">
                  <span class="subscribe-date">订阅于 {{ formatDate(tag.subscribedAt) }}</span>
                </div>
              </div>
              <div class="tag-actions">
                <button 
                  class="btn-notification" 
                  :class="{ active: tag.notifications }"
                  @click="toggleNotification(tag.id)"
                >
                  <i class="icon-bell"></i>
                  {{ tag.notifications ? '已开启通知' : '开启通知' }}
                </button>
                <button class="btn-unsubscribe" @click="unsubscribeTag(tag.id)">
                  取消订阅
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>推荐标签</h3>
        <div class="category-filter">
          <button 
            v-for="category in categories" 
            :key="category.id"
            class="category-btn"
            :class="{ active: selectedCategory === category.id }"
            @click="selectCategory(category.id)"
          >
            {{ category.name }}
          </button>
        </div>
        
        <div class="recommended-tags">
          <div v-if="filteredRecommendedTags.length === 0" class="empty-state">
            <p>暂无推荐标签</p>
          </div>
          
          <div v-else class="tag-grid">
            <div 
              v-for="tag in filteredRecommendedTags" 
              :key="tag.id" 
              class="tag-card recommended"
            >
              <div class="tag-info">
                <div class="tag-header">
                  <h4 class="tag-name">#{{ tag.name }}</h4>
                  <span class="tag-category">{{ tag.category }}</span>
                </div>
                <p class="tag-description">{{ tag.description }}</p>
                <div class="tag-stats">
                  <span class="stat-item">
                    <i class="icon-posts"></i>
                    {{ tag.postCount }} 篇内容
                  </span>
                  <span class="stat-item">
                    <i class="icon-followers"></i>
                    {{ tag.followerCount }} 关注者
                  </span>
                  <span class="stat-item trending" v-if="tag.trending">
                    <i class="icon-trending"></i>
                    热门
                  </span>
                </div>
              </div>
              <div class="tag-actions">
                <button class="btn-subscribe" @click="subscribeTag(tag)">
                  + 订阅
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>订阅设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>新内容通知</label>
            <p>订阅的标签有新内容时通知我</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.newContentNotification" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>热门内容推送</label>
            <p>推送订阅标签下的热门内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.trendingContentPush" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>每日摘要</label>
            <p>每天发送订阅标签的内容摘要</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.dailyDigest" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>智能推荐</label>
            <p>基于订阅标签推荐相关内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.smartRecommendation" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>推送频率</label>
            <p>设置接收推送的频率</p>
          </div>
          <select v-model="settings.pushFrequency" class="frequency-select">
            <option value="realtime">实时推送</option>
            <option value="hourly">每小时</option>
            <option value="daily">每天</option>
            <option value="weekly">每周</option>
          </select>
        </div>
      </div>
      
      <div class="form-actions">
        <button class="btn-primary" @click="saveSettings">保存设置</button>
        <button class="btn-secondary" @click="resetSettings">恢复默认</button>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import HeaderComponent from '@/components/HeaderComponent.vue';

export default {
  components: {
    HeaderComponent
  },
  name: 'TagSettings',
  props: {
    isLoggedIn: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => ({})
    },
    showUserPanel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchTag: '',
      sortBy: 'name',
      selectedCategory: 'all',
      subscribedTags: [
        {
          id: 1,
          name: 'Vue.js',
          category: '前端开发',
          description: 'Vue.js 相关的技术文章和教程',
          postCount: 1234,
          followerCount: 5678,
          notifications: true,
          subscribedAt: new Date('2024-01-15')
        },
        {
          id: 2,
          name: 'JavaScript',
          category: '编程语言',
          description: 'JavaScript 开发技巧和最佳实践',
          postCount: 2345,
          followerCount: 8901,
          notifications: false,
          subscribedAt: new Date('2024-01-10')
        },
        {
          id: 3,
          name: '机器学习',
          category: '人工智能',
          description: '机器学习算法、模型和应用案例',
          postCount: 987,
          followerCount: 3456,
          notifications: true,
          subscribedAt: new Date('2024-01-05')
        }
      ],
      recommendedTags: [
        {
          id: 101,
          name: 'React',
          category: '前端开发',
          description: 'React 框架开发指南和组件库',
          postCount: 1876,
          followerCount: 6789,
          trending: true
        },
        {
          id: 102,
          name: 'Python',
          category: '编程语言',
          description: 'Python 编程技巧和项目实战',
          postCount: 3210,
          followerCount: 9876,
          trending: false
        },
        {
          id: 103,
          name: '深度学习',
          category: '人工智能',
          description: '深度学习模型训练和优化技术',
          postCount: 654,
          followerCount: 2345,
          trending: true
        },
        {
          id: 104,
          name: 'Node.js',
          category: '后端开发',
          description: 'Node.js 服务端开发和API设计',
          postCount: 1432,
          followerCount: 4567,
          trending: false
        }
      ],
      categories: [
        { id: 'all', name: '全部' },
        { id: '前端开发', name: '前端开发' },
        { id: '后端开发', name: '后端开发' },
        { id: '编程语言', name: '编程语言' },
        { id: '人工智能', name: '人工智能' },
        { id: '数据科学', name: '数据科学' },
        { id: '移动开发', name: '移动开发' }
      ],
      settings: {
        newContentNotification: true,
        trendingContentPush: true,
        dailyDigest: false,
        smartRecommendation: true,
        pushFrequency: 'daily'
      },
      defaultSettings: {}
    }
  },
  computed: {
    sortedTags() {
      const tags = [...this.subscribedTags];
      switch (this.sortBy) {
        case 'name':
          return tags.sort((a, b) => a.name.localeCompare(b.name));
        case 'date':
          return tags.sort((a, b) => new Date(b.subscribedAt) - new Date(a.subscribedAt));
        case 'popularity':
          return tags.sort((a, b) => b.followerCount - a.followerCount);
        default:
          return tags;
      }
    },
    filteredRecommendedTags() {
      if (this.selectedCategory === 'all') {
        return this.recommendedTags;
      }
      return this.recommendedTags.filter(tag => tag.category === this.selectedCategory);
    }
  },
  mounted() {
    this.loadSettings();
  },
  methods: {
    loadSettings() {
      // 从本地存储加载设置
      const savedSettings = localStorage.getItem('tagSettings');
      if (savedSettings) {
        this.settings = { ...this.settings, ...JSON.parse(savedSettings) };
      }
      this.defaultSettings = { ...this.settings };
    },
    searchTags() {
      if (!this.searchTag.trim()) {
        this.$message?.warning('请输入搜索关键词');
        return;
      }
      
      console.log('搜索标签:', this.searchTag);
      // 这里应该调用API搜索标签
      this.$message?.info('搜索功能开发中...');
    },
    sortTags() {
      // 排序逻辑在computed中处理
    },
    refreshTags() {
      console.log('刷新标签列表');
      // 这里应该调用API刷新列表
      this.$message?.success('列表已刷新');
    },
    showRecommendedTags() {
      // 滚动到推荐标签区域
      const element = document.querySelector('.recommended-tags');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    },
    selectCategory(categoryId) {
      this.selectedCategory = categoryId;
    },
    toggleNotification(tagId) {
      const tag = this.subscribedTags.find(t => t.id === tagId);
      if (tag) {
        tag.notifications = !tag.notifications;
        this.$message?.success(
          tag.notifications ? '已开启通知' : '已关闭通知'
        );
      }
    },
    unsubscribeTag(tagId) {
      const tag = this.subscribedTags.find(t => t.id === tagId);
      if (tag && confirm(`确定要取消订阅 "${tag.name}" 标签吗？`)) {
        this.subscribedTags = this.subscribedTags.filter(t => t.id !== tagId);
        this.$message?.success('已取消订阅');
      }
    },
    subscribeTag(tag) {
      // 检查是否已订阅
      const isSubscribed = this.subscribedTags.some(t => t.id === tag.id);
      if (isSubscribed) {
        this.$message?.warning('您已订阅此标签');
        return;
      }
      
      // 添加到订阅列表
      const newTag = {
        ...tag,
        notifications: true,
        subscribedAt: new Date()
      };
      this.subscribedTags.push(newTag);
      
      // 从推荐列表中移除
      this.recommendedTags = this.recommendedTags.filter(t => t.id !== tag.id);
      
      this.$message?.success(`已订阅 "${tag.name}" 标签`);
    },
    saveSettings() {
      localStorage.setItem('tagSettings', JSON.stringify(this.settings));
      console.log('保存标签设置:', this.settings);
      this.$message?.success('标签设置保存成功');
    },
    resetSettings() {
      this.settings = { ...this.defaultSettings };
      localStorage.removeItem('tagSettings');
      this.$message?.info('已恢复默认设置');
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN');
    }
  }
}
</script>

<style scoped>
.tag-settings {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-layout {
  display: flex;
  min-height: calc(100vh - 60px);
}

.settings-sidebar {
  width: 250px;
  background: white;
  border-right: 1px solid #e0e0e0;
  padding: 20px 0;
}

.sidebar-header {
  padding: 0 20px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.sidebar-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.settings-nav {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.nav-item {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #666;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-link:hover {
  background-color: #f8f9fa;
  color: #007bff;
}

.nav-item.active .nav-link {
  background-color: #e3f2fd;
  color: #1976d2;
  border-right: 3px solid #1976d2;
}

.nav-icon {
  margin-right: 10px;
  font-size: 16px;
}

.settings-content {
  flex: 1;
  padding: 30px;
  background: white;
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 800px;
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.settings-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.settings-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.form-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.search-section {
  margin-bottom: 20px;
}

.search-input {
  display: flex;
  gap: 8px;
}

.search-input input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.btn-search {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-search:hover {
  background-color: #0056b3;
}

.subscribed-tags,
.recommended-tags {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: white;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions select {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
}

.btn-link {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.btn-link:hover {
  color: #0056b3;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: #666;
}

.tag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px;
}

.tag-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  background: white;
  transition: box-shadow 0.2s;
}

.tag-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tag-card.recommended {
  border-color: #007bff;
}

.tag-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.tag-name {
  margin: 0;
  font-size: 16px;
  color: #007bff;
  font-weight: 600;
}

.tag-category {
  background: #e9ecef;
  color: #495057;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.tag-description {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.tag-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #666;
}

.stat-item.trending {
  color: #ff6b35;
  font-weight: 500;
}

.tag-meta {
  margin-bottom: 12px;
}

.subscribe-date {
  font-size: 12px;
  color: #999;
}

.tag-actions {
  display: flex;
  gap: 8px;
}

.btn-notification {
  flex: 1;
  padding: 6px 12px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-notification.active {
  background-color: #28a745;
}

.btn-notification:hover {
  opacity: 0.8;
}

.btn-unsubscribe {
  padding: 6px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-unsubscribe:hover {
  background-color: #c82333;
}

.btn-subscribe {
  width: 100%;
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn-subscribe:hover {
  background-color: #0056b3;
}

.category-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 6px 12px;
  background-color: #e9ecef;
  color: #495057;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.category-btn.active {
  background-color: #007bff;
  color: white;
}

.category-btn:hover {
  background-color: #007bff;
  color: white;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: 20px;
}

.setting-info label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.frequency-select {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}

/* 图标样式 */
.icon-posts::before { content: "📄"; }
.icon-followers::before { content: "👥"; }
.icon-bell::before { content: "🔔"; }
.icon-trending::before { content: "🔥"; }
</style>